/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { PureComponent } from "react";
import { connect } from "dva";
import moment from "moment";
import { Card, Form, Input, Button } from "antd";
import { debounce } from "lodash";
import StandardTable from "@/components/StandardTable";
import styles from "./style.less";
import InfoCheck from "@/components/InfoCheck";

const FormItem = Form.Item;
@connect(({ loading, order, station, user, scanning }) => ({
  station,
  order,
  currentUser: user.currentUser,
  scanning,
  stationing: loading.effects["station/getStationList"],
  loading: loading.effects["scanning/getSingleList"],
}))
@Form.create()
export default class SingleNumber extends PureComponent {
  state = {
    currentStation: null,
    operator: null,
  };

  // 时间格式转换
  getFormValues = then => {
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
      };
      const { date } = fieldsValue;
      if (date) {
        values.date = date.map(d => moment(d).format("YYYY-MM-DD"));
        const [start, end] = values.date;
        values.start_at = start;
        values.end_at = end;
        delete values.date;
      }
      this.setState({
        formValues: values,
      });
      then(values);
    });
  };

  // 查询
  handleSearch = debounce(e => {
    e && e.preventDefault();
    const { dispatch } = this.props;
    this.getFormValues(values => {
      dispatch({
        type: "scanning/getSingleList",
        payload: {
          waybill_no: values.waybill_no || "",
        },
      });
    });
  }, 500, {
    leading: true,
    trailing: false
  })

  // 翻页
  handleStandardTableChange = debounce(pagination => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    const params = {
      page: pagination.current,
      size: pagination.pageSize,
      ...formValues,
    };
    dispatch({
      type: "scanning/getSingleList",
      payload: params,
    });
  }, 500, {
    leading: true,
    trailing: false
  })

  render() {
    const {
      currentUser,
      scanning: { singleNumber },
      loading,
      form,
    } = this.props;
    const { getFieldDecorator } = form;
    const { list, pagination } = singleNumber;
    const data = { list, pagination };
    const columns = [
      {
        title: "扫描时间",
        dataIndex: "scan_time",
        align: "center",
        width: "14%",
      },
      {
        title: "上传时间",
        dataIndex: "update_time",
        align: "center",
        width: "14%",
      },
      {
        title: "扫描类型",
        dataIndex: "waybill_type",
        align: "center",
        width: "14%",
      },
      {
        title: "站点",
        align: "center",
        width: "14%",
        dataIndex: "shop_name",
      },
      {
        title: "扫描人",
        align: "center",
        width: "14%",
        dataIndex: "cm_name",
      },
      {
        title: "扫描设备",
        align: "center",
        width: "14%",
        dataIndex: "dev_id",
      },
      {
        title: "扫描内容",
        align: "center",
        dataIndex: "scan_content",
        width: "14%",
        render: (current, currentData) => {
          return <span>{currentData.scan_content ? currentData.scan_content : "-"}</span>;
        },
      },
    ];
    const formItemLayout = {
      labelCol: {
        xs: { span: 0 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <div>
        <div className={styles.main}>
          <Card bordered={false} bodyStyle={{ padding: "0 0 24px" }}>
            <Form onSubmit={this.handleSearch} className={styles["search-form"]} layout="inline">
              <FormItem {...formItemLayout} label="同城单号">
                {getFieldDecorator("waybill_no", {
                  rules: [
                    {
                      required: true,
                      message: "单号不能为空",
                    },
                  ],
                })(<Input placeholder="请输入同城单号" />)}
              </FormItem>
              <FormItem>
                <span className={styles.submitButtons}>
                  <Button
                    type="primary"
                    htmlType="submit"
                    key="search"
                    loading={loading}
                    icon="search"
                  >
                    查询
                  </Button>
                </span>
              </FormItem>
            </Form>
          </Card>
          <StandardTable
            rowKey="id"
            loading={loading}
            data={data}
            columns={columns}
            onChange={this.handleStandardTableChange}
          />
          <InfoCheck />
        </div>
      </div>
    );
  }
}
